<template>
  <div>
    <V-CommonHeaderLeft>
      <div class="container">
        <div class="nav">
          <navigation :msg="navMsg"></navigation>
        </div>
        <div class="content">
          <div class="nav1">
            <publicNavigation :pub="pub"></publicNavigation>
          </div>
          <div id="box" :style="{ height:height }">
            <div class="minimum-order">
              <p class="p1">起订量</p>
              <div class="input">
                <input type="checkbox" name="minimum" id="minimum" @change="hideOrDisplay(1)">
                <label for="minimum">开启商品起订量</label>
                <input type="checkbox" name="minimum" id="order1" v-if="hide1">
                <label for="order1" v-if="hide1">客户下单不限制起订量</label>
              </div>
              <p class="p2">*启用后，订购商品数量需大于或等于起订量数量方可订购</p>
            </div>
            <div class="limited-order">
              <p class="p1">限订量</p>
              <div class="input">
                <input type="checkbox" name="limited" id="limited" @change="hideOrDisplay(2)">
                <label for="limited">开启商品起订量</label>
                <input type="checkbox" name="limited" id="order2" v-if="hide2">
                <label for="order2" v-if="hide2">客户下单不限制起订量</label>
              </div>
              <p class="p2">*启用后，订购商品数量需大于或等于起订量数量方可订购</p>
            </div>
            <div class="weight">
              <p class="p1">商品重量</p>
              <div class="input">
                <input type="checkbox" name="weight" id="weight">
                <label for="weight">开启商品重量</label>
              </div>
              <p class="p2">*启用后，商品规格编辑可填写重量参数（单位：kg）</p>
            </div>
            <div class="volume">
              <p class="p1">商品体积</p>
              <div class="input">
                <input type="checkbox" name="volume" id="volume">
                <label for="volume">开启商品体积</label>
              </div>
              <p class="p2">
                *启用后，商品规格编辑可填写体积参数（单位：m
                <sup>3</sup>）
              </p>
            </div>
            <div class="brand">
              <p class="p1">品牌</p>
              <div class="input">
                <input type="checkbox" name="brand" id="brand">
                <label for="brand">开启商品品牌</label>
              </div>
              <p class="p2">*启用后，商品信息将增加品牌选项，订货商城将增加品牌筛选项</p>
            </div>
            <div class="price">
              <p class="p1">商品价格</p>
              <div class="prices">
                <div class="input">
                  <input type="checkbox" name="revision" id="revision">
                  <label for="revision">开启新增/编辑采购单时允许改价</label>
                </div>
                <p class="p2">*启用后，新增采购单时，可以修改商品的采购价</p>
              </div>
              <div class="prices">
                <div class="input">
                  <input type="checkbox" name="sales" id="sales">
                  <label for="sales">开启商品采购时可录入销售价</label>
                </div>
                <p class="p2">*启用后，商品采购入库时可按采购单录入的销售价更新商品的销售价格</p>
              </div>
            </div>
            <div class="accuracy">
              <p class="p1">精度设置</p>
              <div class="accuracys">
                <label>商品数量精度</label>
                <div class="items">
                  <div class="item">
                    <input type="radio" name="quantitativeAccuracy" checked>
                    <span>整数</span>
                  </div>
                  <div class="item">
                    <input type="radio" name="quantitativeAccuracy">
                    <span>一位小数</span>
                  </div>
                  <div class="item">
                    <input type="radio" name="quantitativeAccuracy">
                    <span>二位小数</span>
                  </div>
                </div>
              </div>
              <div class="accuracys">
                <label>商品价格精度</label>
                <div class="items">
                  <div class="items">
                    <div class="item">
                      <input type="radio" name="pricePrecision" checked>
                      <span>整数</span>
                    </div>
                    <div class="item">
                      <input type="radio" name="pricePrecision">
                      <span>一位小数</span>
                    </div>
                    <div class="item">
                      <input type="radio" name="pricePrecision">
                      <span>二位小数</span>
                    </div>
                    <div class="item">
                      <input type="radio" name="pricePrecision">
                      <span>三位小数</span>
                    </div>
                    <div class="item">
                      <input type="radio" name="pricePrecision">
                      <span>四位小数</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="btn">
            <button>
              <span class="iconfont icon-test129"></span>
              <span>保存</span>
            </button>
          </div>
        </div>
      </div>
    </V-CommonHeaderLeft>
  </div>
</template>

<script>
import publicNavigation from '@/views/setUp/publicNavigation/publicNavigation'
import VCommonHeaderLeft from '@/components/common/vCommonHeaderLeft/VCommonHeaderLeft'
import navigation from '@/components/common/navigation/Navigation'
export default {
  data () {
    return {
      pub: '2',
      height: '',
      hide1: false,
      hide2: false,
      navMsg: [
        {
          name: '设置',
          path: '/enterpriseInformation'
        },
        {
          name: '商品设置',
          path: ''
        }
      ]
    }
  },
  created () {
    this.getHeight()
  },
  methods: {
    getHeight () {
      this.height = window.innerHeight - 180 + 'px'
    },
    hideOrDisplay (num) {
      if (num === 1) {
        this.hide1 = !this.hide1
      }
      if (num === 2) {
        this.hide2 = !this.hide2
      }
    }
  },
  components: {
    VCommonHeaderLeft,
    navigation,
    publicNavigation
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin-right: 10px;
  .content {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    #box {
      overflow-y: scroll;
      padding: 0px 20px;
      .minimum-order,
      .limited-order,
      .weight,
      .volume,
      .brand {
        margin-top: 10px;
        border-bottom: 1px solid #e3e3e3;
        padding-bottom: 15px;
        .p1 {
          font-weight: 700;
        }
        .p2 {
          font-size: 12px;
          color: #9fa19f;
        }
        .input {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin: 10px 0px 5px;
          label {
            letter-spacing: 1px;
            &:nth-of-type(1) {
              margin-left: 10px;
              margin-right: 20px;
              font-size: 14px;
              font-weight: normal;
            }
            &:nth-of-type(2) {
              margin-left: 10px;
              font-size: 12px;
              font-weight: normal;
              color: #9fa19f;
            }
          }
          input[type="checkbox"] {
            width: 16px;
            height: 16px;
            display: inline-block;
            vertical-align: middle;
            outline: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: 1px solid #c4b3c4;
            border-radius: 2px;
            background-color: none;
            position: relative;
            cursor: pointer;
          }
          input[type="checkbox"]:checked::before {
            content: "00";
            color: transparent;
            -webkit-appearance: none;
            -moz-appearance: none;
            background: url("../../../../static/images/xuanzhong.png") no-repeat;
            background-size: 16px 16px;
            width: 14px;
            height: 14px;
            border: 1px solid #20ade5;
            border-radius: 2px;
            cursor: pointer;
            position: absolute;
            top: -1px;
            left: -1px;
          }
        }
      }
      .price {
        margin-top: 10px;
        border-bottom: 1px solid #e3e3e3;
        padding-bottom: 15px;
        .p1 {
          font-weight: 700;
        }
        .prices {
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-direction: column;
          .p2 {
            font-size: 12px;
            color: #9fa19f;
          }
          .input {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin: 10px 0px 5px;
            label {
              letter-spacing: 1px;
              &:nth-of-type(1) {
                margin-left: 10px;
                margin-right: 20px;
                font-size: 14px;
                font-weight: normal;
              }
            }
            input[type="checkbox"] {
              width: 16px;
              height: 16px;
              display: inline-block;
              vertical-align: middle;
              outline: none;
              -webkit-appearance: none;
              -moz-appearance: none;
              border: 1px solid #c4b3c4;
              border-radius: 2px;
              background-color: none;
              position: relative;
              cursor: pointer;
            }
            input[type="checkbox"]:checked::before {
              content: "00";
              color: transparent;
              -webkit-appearance: none;
              -moz-appearance: none;
              background: url("../../../../static/images/xuanzhong.png")
                no-repeat;
              background-size: 16px 16px;
              width: 14px;
              height: 14px;
              border: 1px solid #20ade5;
              border-radius: 2px;
              cursor: pointer;
              position: absolute;
              top: -1px;
              left: -1px;
            }
          }
        }
      }
      .accuracy {
        margin-top: 10px;
        padding-bottom: 60px;
        .p1 {
          font-weight: 700;
        }
        .accuracys {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-top: 10px;
          label {
            font-weight: normal;
            font-size: 12px;
          }
          .items {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .item {
              margin-left: 20px;
              input[type="radio"] {
                width: 16px;
                height: 16px;
                display: inline-block;
                vertical-align: middle;
                outline: none;
                -webkit-appearance: none;
                background-color: none;
                border: 1px solid #b5bbc4;
                border-radius: 50%;
                margin-right: 8px;
                position: relative;
                cursor: pointer;
              }
              input[type="radio"]:checked::before {
                content: "00";
                color: transparent;
                position: absolute;
                top: 1.5px;
                left: 1.5px;
                border: 1px solid #20ade5;
                border-radius: 50%;
                background-color: #20ade5;
                width: 11px;
                height: 11px;
                box-sizing: border-box;
              }
              input[type="radio"]:checked {
                border: 1px solid #20ade5;
              }
              span {
                font-weight: normal;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
    .btn {
      width: 90%;
      height: 60px;
      background-color: #fff;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      border-top: 1px solid #e3e3e3;
      padding-top: 10px;
      padding-bottom: 10px;
      box-sizing: border-box;
      position: fixed;
      bottom: 0px;
      button {
        margin-right: 40px;
        background-color: #37b5e8;
        width: 150px;
        height: 42px;
        line-height: 42px;
        font-size: 16px;
        color: #fff;
        border: none;
        border-radius: 2px;
        cursor: pointer;
        padding: 0 18px;
        box-sizing: border-box;
        .iconfont {
          color: #fff;
          padding-right: 5px;
        }
      }
    }
  }
}
</style>
